<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用 3实现数据可视化(1-6)</title>
	</head>
	<!--【引入d3.js库】-->
	<script src="http://d3js.org/d3.v3.js"></script>
	<body>
		<h1>用 D3 实现数据可视化</h1>
		<hr>
		<!-- ======================== -->
		<h3>用 D3 给文档添加元素</h3>
		<p>使用select方法选择文本id为box1的元素。然后用append方法为它添加一个h1标签，同时在h1中添加文本 "Learning D3"。</p>
		<div id="box1"></div>
		<script type="text/javascript" src="./01-add-document-elements-with-d3.js"></script>
		<hr>
		<!-- ======================== -->
		<h3>用 D3 选择一组元素</h3>
		<p>选择所有的li标签，通过.text()方法将它的文本改为 "list item"</p>
		<ul id="box2">
			<li>Example</li>
			<li>Example</li>
			<li>Example</li>
		</ul>
		<script type="text/javascript" src="./02-select-a-group-of-elements-with-d3.js"></script>
		<hr>
		<!-- ======================== -->
		<h3>使用 D3 中的数据</h3>
		<p>选择body节点，然后选择所有的h2元素。让 D3 为dataset数组中的每一个对象创建并添加文本为 "New Title" 的h2标签。你应该使用data()和enter()方法。</p>
		<div id="box3"></div>
		<script src="./03-work-with-data-in-d3.js" type="text/javascript"></script>
		<hr>
		<!-- ======================== -->
		<h3>使用 D3 中的动态数据</h3>
		<!-- <script src="" type="text/javascript"></script> -->
		<hr>
		<!-- ======================== -->
		<p>在前一题扩展</p>
		<h3>使用 D3 中的动态数据</h3>
		<p>改变text()方法使得每个h2元素显示dataset数组中的对应值加上一个空格和 "USD"。例如，第一个标题应该为 "12 USD"。</p>
		
		<div id="box4"></div>
		<script src="./04-work-with-dynamic-data-in-d3.js" type="text/javascript"></script>
		<hr>
		<!-- ======================== -->
		<p>在前一题扩展</p>
		<h3>给元素添加内联样式</h3>
		<p>在编辑器中添加style()方法，使所有显示的文本的font-family为verdana。</p>
		<div id="box5"></div>
		<script src="./05-add-inline-styling-to-elements.js" type="text/javascript"></script>
		<hr>
		<!-- ======================== -->
		<p>在前一题扩展</p>
		<h3>根据数据更改样式</h3>
		<p>在编辑器中添加style()方法，根据条件设置h2元素的color属性。写一个回调函数，如果值小于 20 返回 "red"，否则返回 "green"。</p>
		<div id="box6"></div>
		<script src="./06-change-styles-based-on-data.js" type="text/javascript"></script>
		<hr>
		<!-- ======================== -->
	</body>
</html>
